import Vue from 'vue'
import Component from 'vue-class-component'
import './productStyle.css'
import { Toast, MessageBox} from 'mint-ui'
@Component({
  props: {
    product: Object,
    type: String
  }
})

export default class ProductFlowItemClass extends Vue {
  saleBtnName = ''
  status = 0

  created() {
    this.status = this.product.productStatus

    if (this.status === 0) {
      this.saleBtnName = '上架'
    } else {
      this.saleBtnName = '下架'
    }
  }

  handleClick () {
    if (this.type && this.type.length > 0) {
      this.$router.push({name: 'productDetails', params: {productId: this.product.productId, type: 'store'}})
    } else {
      this.$router.push({name: 'productDetails', params: {productId: this.product.productId, type: 'default'}})
    }
  }

  handleEdit (e) {
    e.stopPropagation()
    this.$router.push({name: 'productEdit', params: {productId: this.product.productId}})
  }

  handleSaleAlert(e) {
    e.stopPropagation()
    MessageBox.confirm('是否' + this.saleBtnName + '商品?', '提示').then(action => {
      this.handleSale(e)
    }).catch(err => {
        // 点击取消

      console.log(err)
    })
  }

  async handleSale (e) {
    e.stopPropagation()
    try {
      let params = {
        productId: this.product.productId,
        productStatus: this.product.productStatus === 0 ? 1 : 0,
        skus: this.product.skus
      }
      const response = await this.$axios.post('/buyer/v1/product/modify', params)
      if (response.status === 0) {
        Toast(this.saleBtnName + '成功')
        if (this.saleBtnName === '上架') {
          this.saleBtnName = '下架'
          this.product.productStatus = 1
        } else {
          this.saleBtnName = '上架'
          this.product.productStatus = 0
        }
      } else {
        Toast(this.saleBtnName + '失败')
      }
    } catch (e) {
      Toast(this.saleBtnName + '失败')
    }
  }

  render () {
    return (
      <dl onClick={this.handleClick} class = 'productFlowItemClass'>
        <font onClick={this.handleEdit} v-show={this.type && this.type.length > 0} style='top:0px' class='productSaleClass'>编辑</font>
        <font onClick={this.handleSaleAlert} v-show={this.type && this.type.length > 0} style='top:30px' class='productSaleClass'>{this.saleBtnName}</font>
        <dt><img v-lazy = {this.product.productCover ? this.product.productCover + '?x-oss-process=image/resize,m_pad,h_400,w_400,color_ffffff/quality,Q_80/format,jpg' : ''}/></dt>
        <dd>
          <p class="textOneLine">{this.product.designerName}</p>
          <p class="textOneLine">{this.product.productName}</p>
          <p class="showPrice">{this.product.currencyLogo}{this.product.showPrice}<font style='color:#333;font-size:12px'>{this.product.labelText ? ' ' + this.product.labelText : ''}</font></p>
        </dd>
      </dl>
    )
  }
}
